<template>
  <div class="doc">
    <div class="left">
      <a-row>
        <a-col :span="6">
          <a-tree
            v-if="level1.length > 0"
            :tree-data="level1"
            @select="onSelect"
            :fieldNames="{ title: 'name', key: 'id', value: 'id' }"
            :defaultExpandAll="true"
          >
          </a-tree>
        </a-col>
      </a-row>
      <h3 v-if="level1.length <= 0" class="tip">无数据!</h3>
    </div>
    <div class="right">
      <!-- <h2 v-if="selected" class="tip">未选择文档!</h2> -->
      <div v-if="!selected">
        <div>
          <h2>{{ formState.name }}</h2>
          <div>
            <span>阅读数：{{ formState.view_count }}</span> &nbsp; &nbsp;
            <span>点赞数：{{ formState.vote_count }}</span>
          </div>
          <a-divider style="height: 2px; background-color: #9999cc" />
        </div>
        <!-- 内容 -->
        <div :innerHTML="formState.content"></div>
        <!-- 点赞 -->
        <div class="vote-div">
          <a-button
            type="primary"
            shape="round"
            :size="'large'"
            @click="vote"
            style="height: 55px"
          >
            <template #icon
              ><LikeOutlined /> &nbsp;点赞：{{ formState.vote_count }}
            </template>
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { getDocListByPage, findContentById } from "@/api/doc";
import { toTreeDoc, getDocLevel1 } from "@/util/toTree";
import { message } from "ant-design-vue";
import { useRoute } from "vue-router";
import { docVote } from "@/api/doc";

// 请求分页数据
let route = useRoute();
const docs = reactive<any[]>([]);
let level1 = reactive<any[]>([]);
let origin_docs: any = {};
// =========================== 初始化数据
const handlerQuery = () => {
  getDocListByPage(route.params.ebookId).then((res) => {
    let docsTree = toTreeDoc(res.data.data);
    docs.length = 0;
    docs.push(...docsTree);

    // level1
    level1.length = 0;
    level1.push(...getDocLevel1(res.data.data));
    level1.shift();

    // 没转变为树的原始数据
    origin_docs = {};
    res.data.data &&
      res.data.data.forEach((item: any) => {
        origin_docs[item.id] = item;
      });
    // console.log(origin_docs);

    // 获取content
    getContentList(res.data.data);
  });
};
handlerQuery();
watch(
  () => route.fullPath,
  () => {
    selected.value = true;
    handlerQuery();
  }
);

// =========================== 根据id获取内容
const contentList = reactive<any>({});
const getContentList = (docs: any) => {
  let ids =
    docs &&
    docs.map((item: any) => {
      return item.id;
    });
  ids &&
    ids.forEach((id: number) => {
      findContentById(id).then((res) => {
        contentList[id] = res.data.data;
      });
    });
};

// =========================== onSelect
const selected = ref(true);
let formState = reactive<any>({
  ebook_id: 0,
  id: 0,
  name: "",
  parent: 0,
  sort: 0,
  view_count: 0,
  vote_count: 0,
  content: "",
});
// const content = ref<string>("");
const onSelect = (value: any) => {
  selected.value = false;

  let doc = origin_docs[value[0]];
  // 得到文档信息
  Object.keys(doc).forEach((key) => {
    formState[key] = doc[key];
  });
  // 得到内容
  formState.content = contentList[value[0]];
};

// ==========================点赞
const vote = () => {
  docVote(formState.id).then((res) => {
    if (res.data.code === 10001) {
      message.success(res.data.msg);
      formState.vote_count++;
    } else {
      message.error(res.data.msg);
    }
  });
};
</script>

<style scope>
.doc {
  display: flex;
}
.left {
  min-width: 170px;
  border-right: 1px solid gray;
}
.right {
  position: relative;
  flex: 1;
  padding: 20px;
}
.right .tip {
  border: none;
  text-align: center;
  color: gray;
}
.ant-row {
  display: flex;
  flex-wrap: nowrap;
}
.ant-tree .ant-tree-node-content-wrapper {
  width: 70px;
}
.vote-div {
  padding: 15px;
  text-align: center;
}
.vote-div .ant-btn-round {
  position: absolute;
  bottom: 0;
  right: 10px;
}
</style>
